<template>
  <view class="page-container">
    <!-- 自定义导航栏 -->
    <CustomNavBar ref="customNavBarRef" title="接单流程" :isSearch="false" :showIcon="false" :isBack="true" />
    <!-- 主要内容 -->
    <view :style="{ marginTop: getNavBarHeight() + 'px' }">
      <image src="https://lemawuyou.oss-cn-shanghai.aliyuncs.com/client/haibao/shd.png" alt="" style="width: 100%;" mode="widthFix"></image>
    </view>
<!--    <view class="content-box" >-->
<!--      &lt;!&ndash; 标题 &ndash;&gt;-->
<!--      <view class="page-title" :style="{ marginTop: getNavBarHeight() + 'px' }">-->
<!--        商户接单流程介绍-->
<!--      </view>-->
<!--      -->
<!--      &lt;!&ndash; 流程图 &ndash;&gt;-->
<!--      <view class="flow-chart">-->
<!--        &lt;!&ndash; 步骤1 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">注册成功后进入首页</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤2 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">点击查看订单详情</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤3 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">与用户沟通协商后接单</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤4 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">用户允许接单</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤5 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">用户支付定金</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤6 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">按照用户规定时间进行开发设计</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤7 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">设计成功后交付用户</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤8 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">用户确认无误后进行结尾款</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤9 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">完成订单</text>-->
<!--        </view>-->
<!--      </view>-->
<!--      -->
<!--      &lt;!&ndash; 常见问题区域 &ndash;&gt;-->
<!--      <view class="faq-section">-->
<!--        &lt;!&ndash; 问答项 &ndash;&gt;-->
<!--        <view class="faq-item">-->
<!--          <view class="faq-question">-->
<!--            <text>Q: 用户要求去其他地方交易?</text>-->
<!--          </view>-->
<!--          <view class="faq-answer">-->
<!--            <text>A: 请勿同意此类要求。根据平台规定，所有交易必须在平台内完成，以确保双方权益。若遇此情况，请礼貌拒绝并向平台客服报告，平台将对此类行为进行调查处理。私下交易可能导致资金损失和信誉受损，请务必遵守平台规则。</text>-->
<!--          </view>-->
<!--        </view>-->
<!--        -->
<!--        <view class="faq-item">-->
<!--          <view class="faq-question">-->
<!--            <text>Q: 用户确认订单会不给尾款吗</text>-->
<!--          </view>-->
<!--          <view class="faq-answer">-->
<!--            <text>A: 平台有完善的订单保障机制。若用户已确认订单完成，平台会按约定释放尾款。如遇用户恶意拖欠，请及时联系客服提供相关证据，平台将介入调解并保障您的合法权益。建议在交付作品前先提供低清预览，确认尾款支付后再交付高清成品。</text>-->
<!--          </view>-->
<!--        </view>-->
<!--        -->
<!--        <view class="faq-item">-->
<!--          <view class="faq-question">-->
<!--            <text>Q: 用户新增要求怎么办</text>-->
<!--          </view>-->
<!--          <view class="faq-answer">-->
<!--            <text>A: 用户新增需求属于正常情况，请按以下步骤处理：1.评估新增需求的工作量和难度；2.与用户友好协商，明确说明是否需要额外费用和时间；3.达成一致后在平台内补充协议或发起新订单；4.切勿私下同意额外工作而不签订正式协议。若用户坚持免费增加工作量，可礼貌拒绝并请平台客服协调。</text>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
<!--      -->
<!--      &lt;!&ndash; 用户新增需求流程介绍 &ndash;&gt;-->
<!--      <view class="section-title">-->
<!--        用户新增需求流程介绍-->
<!--      </view>-->
<!--      -->
<!--      &lt;!&ndash; 流程图 &ndash;&gt;-->
<!--      <view class="flow-chart">-->
<!--        &lt;!&ndash; 步骤1 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">对用户的订单接单</text>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 箭头 &ndash;&gt;-->
<!--        <view class="flow-arrow">-->
<!--          <view class="arrow-line"></view>-->
<!--        </view>-->
<!--        -->
<!--        &lt;!&ndash; 步骤2 &ndash;&gt;-->
<!--        <view class="flow-step">-->
<!--          <text class="step-text">用户提出需求</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
  </view>
</template>

<script setup lang="ts">
import CustomNavBar from "@/composables/header/index.vue";
import {getNavBarHeight} from "@/utils/navBarHeight";
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #ffffff;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 自定义导航栏样式 */
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 180rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  position: relative;
  
  .navbar-left, .navbar-right {
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .navbar-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20rpx 30rpx;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
  text-align: center;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 60rpx 0;
  text-align: center;
}

/* 流程图样式 */
.flow-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60%;
}

.flow-step {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  
  .step-text {
    font-size: 28rpx;
    color: #333;
    text-align: center;
    line-height: 1.5;
  }
}

.flow-arrow {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5rpx 0;
  
  .arrow-line {
    width: 1px;
    height: 100%;
    background-color: #999;
    position: relative;
    
    &:after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6rpx solid transparent;
      border-right: 6rpx solid transparent;
      border-top: 8rpx solid #999;
    }
  }
}

.faq-section {
  width: 100%;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
}

.faq-item {
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .faq-question {
    font-size: 26rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
    color: #333;
  }
  
  .faq-answer {
    font-size: 24rpx;
    color: #666;
    line-height: 1.5;
  }
}
</style>
